<!-- 登录 -->
<template>
	<view class="content">
		<view class="" style="height: 176rpx;"></view>
		<view class="title">
			<view class="" style="margin-bottom: 18rpx;">{{$t("login.title1")}}</view>
			<view class="" style="width: 60vw;">{{$t("login.title2")}}</view>
		</view>
		<view class="from-box">
			<uni-forms :modelValue="form" class="uni-forms">
				<uni-forms-item class="uni-forms-item" :label="$t('login.account')" name="user_account">
					<input class="input" placeholder-style="font-size:28rpx;" type="text" v-model="form.user_account"
						:placeholder="$t('login.please_account')" />
				</uni-forms-item>
				<view class="line"></view>
				<uni-forms-item class="uni-forms-item" :label="$t('login.password')" name="user_password">
					<input class="input" type="password" v-model="form.user_password"
						:placeholder="$t('login.please_password')" />
				</uni-forms-item>
				<view class="line"></view>
				<uni-forms-item class="uni-forms-item" :label="$t('login.standing')" name="user_standing">
					<!-- <uni-data-select v-model="form.user_standing" :localdata="range"
						:placeholder="$t('login.please_standing')"></uni-data-select> -->
					employee
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="submit" @click="handleSumbit">{{$t("login.sumbit")}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				form: {
					user_account: "",
					user_password: "",
					type: 4,
				},
				range: [{
						value: 1,
						text: this.$t("login.range.merchant")
					}, {
						value: 2,
						text: this.$t("login.range.stash")
					},
					{
						value: 3,
						text: this.$t("login.range.shop")
					},
					{
						value: 4,
						text: this.$t("login.range.staff")
					}
				]
			}
		},
		created() {
			let user_account = uni.getStorageSync('user_account')
			let user_password = uni.getStorageSync('user_password')
			if (user_account) {
				this.form.user_account = user_account
			}
			if (user_password) {
				this.form.user_password = this.$jwtt(user_password)
			}
		},
		methods: {
			// 提示框
			_showToast(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				})
			},
			// 提交事件
			handleSumbit() {
				// console.log(this.$ajax, 'this.ajax');
				if (!this.form.user_account) return this._showToast(this.$t("login.please_account"))
				if (!this.form.user_password) return this._showToast(this.$t("login.please_password"))
				// if (!this.form.user_standing) return this._showToast(this.$t("login.please_standing"))
				if (this.form.user_standing) {
					uni.setStorageSync("type", this.form.user_standing)
					uni.setStorageSync("standing", this.form.user_standing)
				}

				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })
				// return
				let url = this.$http + "/QrcodeUser/login"
				let data =
					`user_account=${this.form.user_account}&user_password=${this.form.user_password}&type=${this.form.type}`
				this.$ajax(url, "POST", data, (response) => {
					let res = JSON.parse(response)
					// console.log('res:', res);
					if (res.code !== 200) {
						return uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
					// 商家
					if (res.data.data.staffs_supplier_pid) {
						uni.setStorageSync("standing", 1)
						res.data.data.id = res.data.data.staffs_supplier_pid
					}
					// 仓库
					if (res.data.data.staffs_store_pid) {
						uni.setStorageSync("standing", 2)
						res.data.data.id = res.data.data.staffs_store_pid
					}
					// 店铺
					if (res.data.data.staffs_shop_pid) {
						uni.setStorageSync("standing", 3)
						res.data.data.id = res.data.data.staffs_shop_pid
					}

					uni.setStorageSync("userInfo", res.data.data)
					uni.setStorageSync("token", res.data.data.token)
					uni.setStorageSync("user_account", this.form.user_account)
					uni.setStorageSync("user_password", this.$jwt(this.form.user_password))
					uni.showToast({
						title: "Login successful",
						icon: "none",
						success: () => {
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/index/index"
								})
							}, 1200)
						}
					})
					return
					uni.redirectTo({
						url: "/pages/index/index"
					})
				})

				// uni.request({
				// 	url: ,
				// 	method: "POST",
				// 	data: {
				// 		user_account: this.form.user_account,
				// 		user_password: this.form.user_password,
				// 		type: this.form.user_standing
				// 	},
				// 	success: (res) => {
				// 		console.log(res, 'res')
				// 		if (res.data.code !== 200) {
				// 			return uni.showToast({
				// 				title: res.data.msg,
				// 				icon: "none"
				// 			})
				// 		}
				// 		uni.setStorageSync("standing", this.form.user_standing)
				// 		uni.setStorageSync("userInfo", res.data.data.data)
				// 		uni.setStorageSync("token", res.data.data.data.token)
				// 		uni.showToast({
				// 			title: res.data.msg,
				// 			icon: "none",
				// 			success: () => {
				// 				setTimeout(() => {
				// 					uni.navigateTo({
				// 						url: "/pages/index/index"
				// 					})
				// 				}, 1200)
				// 			}
				// 		})
				// 		return
				// 		uni.redirectTo({
				// 			url: "/pages/index/index"
				// 		})
				// 	}
				// })
				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })
				// uni.redirectTo({
				// 	url: "/pages/index/index"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;
		// padding: 0 24rpx;
		box-sizing: border-box;
		background-image: url(@/static/loginBG.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.from-box {
		background: #fff;
		width: 100%;
		border-radius: 20rpx;
		padding: 80rpx 34rpx;

	}

	.uni-forms {
		background: #fff;
		width: 100%;
		// position: absolute;
		// top: 50%;
		// transform: translate(0, -50%);

		.uni-forms-item {
			width: 100%;
			height: 124rpx;
			margin: 0;
			flex-direction: column;

			.input {
				width: 80%;
				font-size: 30rpx;
				color: #333;
			}
		}

		.line {
			width: 100%;
			height: 1rpx;
			background: #DFE1E6;
			margin-bottom: 60rpx;
		}
	}

	.title {
		height: 224rpx;
		padding-top: 60rpx;
		// text-align: center;
		font-size: 36rpx;
		color: #333;
		padding-left: 24rpx;

	}

	.submit {
		margin-top: 120rpx;
		// position: absolute;
		// bottom: 20rpx;
		// left: 50%;
		// transform: translate(-50%, 0);
		width: 702rpx;
		text-align: center;
		line-height: 88rpx;
		border-radius: 44rpx;
		background: #FF3C3F;
		color: #fff;
		margin: 0 auto;
	}
</style>